import React, { Component } from 'react';
// import ReactRecord from 'react-record';
class AddCategory extends Component {
    constructor(props) {
        super(props);
        this.state = {
            duration: 0,
            blobURL: null,
            isRecording: false,
            currentTime: 0,
            canPlay: false,
            startTime: 0,
            endTime: 0,
            autoPlay: false,
        }
    }

    componentDidMount() {

    }

    onCanPlay(e, play) {
        console.log('可以')
        let myAudio = this.audio;
        this.setState({
            canPlay: true,
            duration: Math.round(myAudio.duration)
        });
    }

    onCanPlayThrough() {
        console.log('中')
    }

    playStepAudio(startTime, endTime) {
        let myAudio = this.audio;
        this.setState({
            startTime: startTime,
            endTime: endTime
        })
        myAudio.pause();
        myAudio.currentTime = startTime;
        this.play()
    }

    onTimeUpdate() {
        let myAudio = this.audio;
        let currentTime = this.audio.currentTime;
        if (this.state.endTime && currentTime >= this.state.endTime) {
            myAudio.pause();
            myAudio.currentTime = 0;
            this.setState({
                endTime: 0
            })
        }
    }

    playFullAudio() {
        let myAudio = this.audio;
        myAudio.pause();
        this.setState({
            startTime: 0,
            endTime: 0
        });
        myAudio.currentTime = 0;
        this.play();
    }

    play() {
        let myAudio = this.audio;
        if (this.state.canPlay) {
            myAudio.play()
        } else {
            myAudio.load();
            myAudio.currentTime = this.state.startTime;
            // myAudio.play();
        }
    }

    onError() {
        console.log('出错了')
        this.setState({
            canPlay: false
        })
    }

    onStalled() {
        console.log('shibai')
        this.setState({
            canPlay: false
        })
    }

    onWaiting() {
        console.log('等待')
        this.setState({
            canPlay: false
        })
    }

    render() {
        return (
            <div className="category">
                <p>音频</p>
                <p onClick={() => this.playStepAudio(10, 20)}>播放</p>
                <p onClick={() => this.playStepAudio(30, 31)}>播放</p>
                <p onClick={() => this.playStepAudio(50, 52)}>播放</p>
                <p onClick={() => this.playFullAudio()}>播放全部</p>
                <p>{this.state.duration}</p>
                <p>{this.state.canPlay ? '可以' : '不可以'}</p>
                <audio
                    ref={ref => this.audio = ref}
                    // src={require('@/assets/demo.mp3')}
                    src="https://magazineqiniu.baolazi.com/FtlAhUBmIklqOVL6fi8uIWTckgEm"
                    // src="https://magazineqiniu.baolazi.com/FlC_eo8UilMpkoQxdSI6zPLVx5DI"
                    controls={true}
                    preload='auto'
                    onCanPlay={this.onCanPlay.bind(this)}
                    onTimeUpdate={this.onTimeUpdate.bind(this)}
                    onError={this.onError.bind(this)}
                    onStalled={this.onStalled.bind(this)}
                    onWaiting={this.onWaiting.bind(this)}
                    onCanPlayThrough={this.onCanPlayThrough.bind(this)}
                >
                    {/* <source src="https://magazineqiniu.baolazi.com/Fl1Z7kbuU1DImUDjql1gwt6yck0W" type="audio/mpeg" /> */}
                    {/* 您的浏览器不支持 audio 元素。 */}
                </audio>
            </div>
        );
    }
}

export default AddCategory;